<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OCR 扫描工具</title>
    <link rel="stylesheet" href="ocr-scanner.css">
    <script src="../ocr-tool/tesseract.min.js"></script>
</head>
<body>
    <div class="header">
        <h1>OCR 文字扫描工具</h1>
        <p class="subtitle">上传图片，自动识别其中的文字内容</p>
    </div>

    <div class="container">
        <!-- 上传区域 -->
        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-content">
                    <div class="upload-icon">📁</div>
                    <h3>点击或拖拽上传图片</h3>
                    <p>支持 JPG、PNG、WEBP 等格式</p>
                    <input type="file" id="fileInput" accept="image/*" hidden>
                    <button class="upload-btn" id="uploadBtn">选择图片</button>
                </div>
            </div>
            
            <!-- 语言选择 -->
            <div class="language-select">
                <label for="language">识别语言：</label>
                <select id="language">
                    <option value="chi_sim">中文简体</option>
                    <option value="chi_tra">中文繁体</option>
                    <option value="eng">英文</option>
                    <option value="chi_sim+eng">中英混合</option>
                    <option value="jpn">日文</option>
                    <option value="kor">韩文</option>
                </select>
            </div>
        </div>

        <!-- 处理区域 -->
        <div class="processing-section" id="processingSection" style="display: none;">
            <div class="image-preview">
                <h3>图片预览</h3>
                <img id="previewImage" alt="预览图片">
                <div class="image-info" id="imageInfo"></div>
            </div>

            <div class="controls">
                <button class="btn btn-primary" id="scanBtn">开始扫描</button>
                <button class="btn btn-secondary" id="resetBtn">重新选择</button>
            </div>

            <!-- 进度显示 -->
            <div class="progress-container" id="progressContainer" style="display: none;">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText">正在初始化...</div>
            </div>
        </div>

        <!-- 结果区域 -->
        <div class="result-section" id="resultSection" style="display: none;">
            <div class="result-header">
                <h3>识别结果</h3>
                <div class="result-actions">
                    <button class="btn btn-secondary" id="copyBtn">复制文本</button>
                    <button class="btn btn-secondary" id="downloadBtn">下载文本</button>
                </div>
            </div>
            
            <div class="result-content">
                <div class="confidence-info">
                    <span>识别置信度：</span>
                    <span id="confidence" class="confidence-value">-</span>
                </div>
                <textarea id="resultText" placeholder="识别结果将显示在这里..." readonly></textarea>
            </div>

            <!-- 详细信息 -->
            <div class="details-section">
                <button class="btn btn-link" id="toggleDetails">查看详细信息</button>
                <div class="details-content" id="detailsContent" style="display: none;">
                    <div class="stats">
                        <div class="stat-item">
                            <span class="stat-label">检测到的段落：</span>
                            <span class="stat-value" id="paragraphCount">-</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">检测到的行数：</span>
                            <span class="stat-value" id="lineCount">-</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">检测到的单词：</span>
                            <span class="stat-value" id="wordCount">-</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">处理时间：</span>
                            <span class="stat-value" id="processingTime">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>

    <!-- 加载遮罩 -->
    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="loading-spinner"></div>
        <div class="loading-text">正在加载 OCR 引擎...</div>
    </div>

    <script src="ocr-scanner.js"></script>
</body>
</html> 